List recent pages and members on landing page #812

mejo- · 2023-07-31T18:13:12Z

📝 Summary

Show 10 most recent pages on landing page.
Show 3 last active members on landing page if it's not a public share.
Resolves: Improved landing page #311

🖼️ Screenshots

Overview

Screencast (slightly outdated)
recording1.webm

🚧 TODO

Animate scroll to left/right in recent pages slider
Update scroll buttons on scrolling (without using the buttons)
Don't display scroll to right button initially when not necessary
Show status in members avatars
Cypress tests

🏁 Checklist

Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
Sign-off message is added to all commits
Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests
Documentation (README or documentation) has been updated or is not required

cypress · 2023-07-31T18:21:24Z

Passing run #997 ↗︎

0	79	0	0	0

Details:

List recent pages and members on landing page
Project: Collectives	Commit: `331a903c24`
Status: Passed	Duration: 05:21 💡
Started: Aug 2, 2023 3:14 PM	Ended: Aug 2, 2023 3:20 PM

_{This comment has been generated by cypress-bot as a result of this
project's GitHub integration settings.}

jancborchardt

Very nice! Would only say 2 things:

Show 3 last active members on landing page if it's not a public share.

Why not all until ellipsis is needed? It is nice to see faces. :)

And also a bit more vertical whitespace between the sections would be cool.

max-nextcloud

Had a brief look at the code. So far everything seems fine. Just have one question.

src/components/Member/CurrentMembers.vue

juliushaertl · 2023-08-01T14:47:08Z

Looks really great already 😍

Just a minor UI nitpick:

The contrast of icons for pages without emojis seems a bit too low
I think the relative timestamp might need more space especially for languages that are a bit more verbose or if the name is longer

Signed-off-by: Jonas <[email protected]>

Disable searching and actions for non-admin users. Signed-off-by: Jonas <[email protected]>

…Bubble Signed-off-by: Jonas <[email protected]>

Show list of members on landing page if it's not a public share. Signed-off-by: Jonas <[email protected]>

Signed-off-by: Jonas <[email protected]>

* Make sure slider buttons don't interfere with scroll container and only get displayed when desired. Also fix background in active state. * Use animated scrolling, * Use scroll snap API to snap scrolling to beginning of tiles. * Debounce updating of buttons. Signed-off-by: Jonas <[email protected]>

Signed-off-by: Jonas <[email protected]>

mejo- · 2023-08-02T10:21:53Z

I think the relative timestamp might need more space especially for languages that are a bit more verbose or if the name is longer

Unfortunately I don't have a good idea here. I'd rather avoid to make the tiles even wider, which would result in less tiles being displayed on narrow screens. And I configured it to be ellipsised on purpose to prevent randomly growing tile width. One option would be to add a line break, like "admin\nseconds ago". What do designers think @jancborchardt @nimishavijay?

…ontrast Signed-off-by: Jonas <[email protected]>

max-nextcloud · 2023-08-02T10:36:51Z

Ideas that come to my mind:

as you said... use two rows: one for the user bubble one for the timestamp. Maybe even move the page title into the tile above?
Use the avatar only instead of the user bubble. Maybe with a tooltip with the user display name.

jancborchardt · 2023-08-02T10:54:05Z

@max-nextcloud yep, avatar only seems fine. :)

nimishavijay · 2023-08-02T11:20:46Z

@mejo- @max-nextcloud I would actually vote for the line break, for the following reasons:

since the avatar is so small it will most likely not be understood easily
we generally don't use the avatar in such a small size in other places
even if there is hover feedback, the touch target is only around 16-20px so possibly not accessible either. Especially on mobile I can imagine trying to click on the avatar and accidentally opening the page.

We could instead show the full user bubble on one line and the timestamp on the next line. That way the entire item could be clickable without any issues :)

mejo- · 2023-08-02T11:30:51Z

vs.

Which one do you prefer @nimishavijay @jancborchardt @max-nextcloud 😊

I prefer the avatar only version. With the linebreak it doesn't work well in my eyes.

Signed-off-by: Jonas <[email protected]>

Our landing page doesn't have a title, so let's just reference it as "Landing page". Signed-off-by: Jonas <[email protected]>

mejo- · 2023-08-02T13:12:56Z

I think I addressed all comments and suggestions for improvements now. See the commit history for details. The screenshot in the PR description is updated, the screencast is not.

jancborchardt

The headings (main page heading and also "Recent pages", "Collective members" and "Landing page") being grey instead of color-main-text looks a bit off, otherwise all good. :)

* Handle missing pageslider element gracefully. * Calculate `scrollLeftMax` since it's non-standard and only supported on Firefox for now. * Hide scrollbar on Chrome and Edge. Signed-off-by: Jonas <[email protected]>

szaimen · 2023-08-08T12:30:21Z

🎉🎉🎉

mejo- added enhancement New feature or request 2. developing labels Jul 31, 2023

mejo- requested review from jancborchardt, juliushaertl, marcoambrosini, nimishavijay and max-nextcloud July 31, 2023 18:13

mejo- self-assigned this Jul 31, 2023

jancborchardt reviewed Jul 31, 2023

View reviewed changes

max-nextcloud approved these changes Jul 31, 2023

View reviewed changes

src/components/Member/CurrentMembers.vue Show resolved Hide resolved

mejo- force-pushed the enh/landing_page branch from d5db24a to adfb640 Compare August 1, 2023 14:13

mejo- added 9 commits August 2, 2023 12:17

refactor(circleMembers): Move sorting by type and level into store

0a843a5

Signed-off-by: Jonas <[email protected]>

refactor(MemberPicker): Allow to display member picker to non-admins

2f165e6

Disable searching and actions for non-admin users. Signed-off-by: Jonas <[email protected]>

feat(LastUserBubble): Optionally prepend "Last edited by" to LastUser…

61705e0

…Bubble Signed-off-by: Jonas <[email protected]>

feat(landingPage): Add list of members to the landing page

6609e21

Show list of members on landing page if it's not a public share. Signed-off-by: Jonas <[email protected]>

feat(landingPage): List recent pages on landing page

102acb4

Signed-off-by: Jonas <[email protected]>

fix(MembersWidget): Show as many members as fit into the container

2c21561

Signed-off-by: Jonas <[email protected]>

test(cypress): Add tests for new landingpage widgets

6823950

Signed-off-by: Jonas <[email protected]>

feat(MembersWidget): Show SkeletonLoading while waiting for members

4ff1437

Signed-off-by: Jonas <[email protected]>

mejo- force-pushed the enh/landing_page branch from adfb640 to f257131 Compare August 2, 2023 10:18

fix(LandingPageWidgets): increase spacing between sections and icon c…

157c7ab

…ontrast Signed-off-by: Jonas <[email protected]>

mejo- force-pushed the enh/landing_page branch from f257131 to 157c7ab Compare August 2, 2023 10:22

mejo- added 3 commits August 2, 2023 14:57

fix(RecentPageTile): put userbubble and timestamp in separate lines

c1096ac

Signed-off-by: Jonas <[email protected]>

fix(RecentPagesWidget): Filter out template pages

b67974f

Signed-off-by: Jonas <[email protected]>

fix(RecentPagesWidget): Change title for landing page

fe7b58a

Our landing page doesn't have a title, so let's just reference it as "Landing page". Signed-off-by: Jonas <[email protected]>

mejo- requested a review from jancborchardt August 2, 2023 13:13

mejo- added 3. to review and removed 2. developing labels Aug 2, 2023

mejo- marked this pull request as ready for review August 2, 2023 13:13

mejo- force-pushed the enh/landing_page branch from 8b8fe0b to d728a82 Compare August 2, 2023 13:41

juliushaertl approved these changes Aug 2, 2023

View reviewed changes

jancborchardt reviewed Aug 2, 2023

View reviewed changes

fix(RecentPagesWidget): Several improvements to pageslider

331a903

* Handle missing pageslider element gracefully. * Calculate `scrollLeftMax` since it's non-standard and only supported on Firefox for now. * Hide scrollbar on Chrome and Edge. Signed-off-by: Jonas <[email protected]>

mejo- force-pushed the enh/landing_page branch from d728a82 to 331a903 Compare August 2, 2023 14:49

mejo- merged commit 93630cd into main Aug 2, 2023
38 checks passed

delete-merged-branch bot deleted the enh/landing_page branch August 2, 2023 15:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

List recent pages and members on landing page #812

List recent pages and members on landing page #812

mejo- commented Jul 31, 2023 •

edited

Loading

cypress bot commented Jul 31, 2023 •

edited

Loading

jancborchardt left a comment

max-nextcloud left a comment

juliushaertl commented Aug 1, 2023

mejo- commented Aug 2, 2023

max-nextcloud commented Aug 2, 2023

jancborchardt commented Aug 2, 2023

nimishavijay commented Aug 2, 2023

mejo- commented Aug 2, 2023

mejo- commented Aug 2, 2023

jancborchardt left a comment

szaimen commented Aug 8, 2023

List recent pages and members on landing page #812

List recent pages and members on landing page #812

Conversation

mejo- commented Jul 31, 2023 • edited Loading

📝 Summary

🖼️ Screenshots

🚧 TODO

🏁 Checklist

cypress bot commented Jul 31, 2023 • edited Loading

Passing run #997 ↗︎

jancborchardt left a comment

Choose a reason for hiding this comment

max-nextcloud left a comment

Choose a reason for hiding this comment

juliushaertl commented Aug 1, 2023

mejo- commented Aug 2, 2023

max-nextcloud commented Aug 2, 2023

jancborchardt commented Aug 2, 2023

nimishavijay commented Aug 2, 2023

mejo- commented Aug 2, 2023

mejo- commented Aug 2, 2023

jancborchardt left a comment

Choose a reason for hiding this comment

szaimen commented Aug 8, 2023

mejo- commented Jul 31, 2023 •

edited

Loading

cypress bot commented Jul 31, 2023 •

edited

Loading